<template>
  <div class="blog-filter-container">
    <!-- 顶部搜索栏 -->
    <div class="filter-search-section">
      <div class="search-container">
        <div class="search-input-wrapper">
          <div class="search-icon">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
          </div>
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索文章标题、内容或作者..."
            class="search-input"
            @input="handleSearchInput"
            @keydown.enter="handleSearch"
          />
          <button v-if="searchQuery" @click="clearSearch" class="clear-button">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <button @click="handleSearch" class="search-button" :disabled="!searchQuery.trim()">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>
          搜索
        </button>
      </div>
    </div>

    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
      <div class="filter-section">
        <!-- 快速筛选按钮 -->
        <div class="quick-filters">
          <button
            v-for="filter in quickFilters"
            :key="filter.value"
            @click="handleQuickFilter(filter.value)"
            class="quick-filter-btn"
            :class="{ active: activeFilters.includes(filter.value) }"
          >
            <span class="filter-icon">{{ filter.icon }}</span>
            <span class="filter-label">{{ filter.label }}</span>
            <span v-if="filter.count !== undefined" class="filter-count">{{ filter.count }}</span>
          </button>
        </div>

        <!-- 高级筛选 -->
        <div class="advanced-filters">
          <button
            @click="showAdvancedFilters = !showAdvancedFilters"
            class="advanced-toggle"
            :class="{ active: showAdvancedFilters }"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.707A1 1 0 013 7V4z"
              />
            </svg>
            高级筛选
            <svg
              class="w-4 h-4 transition-transform duration-200"
              :class="{ 'rotate-180': showAdvancedFilters }"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- 排序选择器 -->
      <div class="sort-section">
        <DropdownMenuRoot>
          <DropdownMenuTrigger class="sort-trigger">
            <span class="sort-icon">{{ currentSortOption.icon }}</span>
            <span class="sort-label">{{ currentSortOption.label }}</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </DropdownMenuTrigger>
          <DropdownMenuPortal>
            <DropdownMenuContent class="sort-dropdown">
              <DropdownMenuItem
                v-for="option in sortOptions"
                :key="option.value"
                @select="handleSortChange(option.value)"
                class="sort-option"
                :class="{ active: sortBy === option.value }"
              >
                <span class="option-icon">{{ option.icon }}</span>
                <span class="option-label">{{ option.label }}</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenuPortal>
        </DropdownMenuRoot>
      </div>
    </div>

    <!-- 高级筛选面板 -->
    <Transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0 max-h-0"
      enter-to-class="opacity-100 max-h-96"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100 max-h-96"
      leave-to-class="opacity-0 max-h-0"
    >
      <div v-if="showAdvancedFilters" class="advanced-panel">
        <div class="advanced-content">
          <!-- 分类筛选 -->
          <div class="filter-group">
            <h4 class="filter-group-title">
              <span class="group-icon">📂</span>
              文章分类
            </h4>
            <div class="filter-options">
              <button
                @click="handleCategorySelect('')"
                class="filter-option"
                :class="{ active: selectedCategory === '' }"
              >
                <span class="option-icon">📝</span>
                <span class="option-label">全部分类</span>
                <span class="option-count">{{ totalArticles }}</span>
              </button>
              <button
                v-for="category in categories"
                :key="category.slug"
                @click="handleCategorySelect(category.slug)"
                class="filter-option"
                :class="{ active: selectedCategory === category.slug }"
              >
                <span class="option-icon">{{ category.icon || '📁' }}</span>
                <span class="option-label">{{ category.name }}</span>
                <span class="option-count">{{ category.count }}</span>
              </button>
            </div>
          </div>

          <!-- 标签筛选 -->
          <div class="filter-group">
            <h4 class="filter-group-title">
              <span class="group-icon">🏷️</span>
              文章标签
            </h4>
            <div class="filter-tags">
              <button
                v-for="tag in popularTags"
                :key="tag.slug"
                @click="handleTagSelect(tag.slug)"
                class="tag-option"
                :class="{ active: selectedTag === tag.slug }"
              >
                <span class="tag-icon">🏷️</span>
                <span class="tag-label">{{ tag.name }}</span>
                <span class="tag-count">{{ tag.count }}</span>
              </button>
            </div>
          </div>

          <!-- 日期范围筛选 -->
          <div class="filter-group">
            <h4 class="filter-group-title">
              <span class="group-icon">📅</span>
              发布时间
            </h4>
            <div class="date-range">
              <div class="date-input-group">
                <label class="date-label">开始日期</label>
                <input
                  v-model="dateRange.start"
                  type="date"
                  class="date-input"
                  @change="handleDateChange"
                />
              </div>
              <div class="date-separator">至</div>
              <div class="date-input-group">
                <label class="date-label">结束日期</label>
                <input
                  v-model="dateRange.end"
                  type="date"
                  class="date-input"
                  @change="handleDateChange"
                />
              </div>
            </div>
          </div>

          <!-- 文章类型筛选 -->
          <div class="filter-group">
            <h4 class="filter-group-title">
              <span class="group-icon">📋</span>
              文章类型
            </h4>
            <div class="type-options">
              <button
                v-for="type in articleTypes"
                :key="type.value"
                @click="handleTypeSelect(type.value)"
                class="type-option"
                :class="{ active: selectedType === type.value }"
              >
                <span class="type-icon">{{ type.icon }}</span>
                <span class="type-label">{{ type.label }}</span>
                <span class="type-count">{{ type.count }}</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 高级筛选操作按钮 -->
        <div class="advanced-actions">
          <button @click="clearAllFilters" class="clear-all-btn">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
              />
            </svg>
            清除所有筛选
          </button>
          <button @click="applyFilters" class="apply-btn">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            应用筛选
          </button>
        </div>
      </div>
    </Transition>

    <!-- 当前筛选状态 -->
    <div v-if="hasActiveFilters" class="active-filters">
      <div class="active-filters-header">
        <h4 class="active-filters-title">
          <span class="title-icon">🎯</span>
          当前筛选条件
        </h4>
        <span class="results-count">
          找到 <strong>{{ filteredCount }}</strong> 篇文章
        </span>
      </div>
      <div class="active-filters-list">
        <div v-if="searchQuery" class="active-filter">
          <span class="filter-type">🔍 搜索</span>
          <span class="filter-value">{{ searchQuery }}</span>
          <button @click="clearSearch" class="remove-filter">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <div v-if="selectedCategory" class="active-filter">
          <span class="filter-type">📂 分类</span>
          <span class="filter-value">{{ getCategoryName(selectedCategory) }}</span>
          <button @click="clearCategory" class="remove-filter">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <div v-if="selectedTag" class="active-filter">
          <span class="filter-type">🏷️ 标签</span>
          <span class="filter-value">{{ getTagName(selectedTag) }}</span>
          <button @click="clearTag" class="remove-filter">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <div v-if="dateRange.start || dateRange.end" class="active-filter">
          <span class="filter-type">📅 日期</span>
          <span class="filter-value">{{ formatDateRange() }}</span>
          <button @click="clearDateRange" class="remove-filter">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <div v-if="selectedType !== 'all'" class="active-filter">
          <span class="filter-type">📋 类型</span>
          <span class="filter-value">{{ getTypeName(selectedType) }}</span>
          <button @click="clearType" class="remove-filter">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import {
  DropdownMenuRoot,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
} from 'reka-ui'

interface FilterProps {
  /** 文章总数 */
  totalArticles?: number
  /** 分类列表 */
  categories?: Array<{ slug: string; name: string; count: number; icon?: string }>
  /** 标签列表 */
  tags?: Array<{ slug: string; name: string; count: number }>
  /** 排序选项 */
  sortOptions?: Array<{ value: string; label: string; icon: string }>
  /** 筛选结果数量 */
  filteredCount?: number
}

interface FilterEmits {
  /** 搜索事件 */
  search: [query: string]
  /** 分类选择事件 */
  categoryChange: [category: string]
  /** 标签选择事件 */
  tagChange: [tag: string]
  /** 排序变化事件 */
  sortChange: [sort: string]
  /** 类型选择事件 */
  typeChange: [type: string]
  /** 日期范围变化事件 */
  dateRangeChange: [range: { start: string; end: string }]
  /** 清除所有筛选事件 */
  clearAll: []
}

const props = withDefaults(defineProps<FilterProps>(), {
  totalArticles: 0,
  categories: () => [],
  tags: () => [],
  sortOptions: () => [
    { value: 'latest', label: '最新发布', icon: '🕒' },
    { value: 'popular', label: '最热文章', icon: '🔥' },
    { value: 'views', label: '浏览最多', icon: '👁️' },
    { value: 'likes', label: '点赞最多', icon: '❤️' },
  ],
  filteredCount: 0,
})

const emit = defineEmits<FilterEmits>()

// 响应式状态
const searchQuery = ref('')
const selectedCategory = ref('')
const selectedTag = ref('')
const selectedType = ref('all')
const sortBy = ref('latest')
const showAdvancedFilters = ref(false)
const dateRange = ref({ start: '', end: '' })

// 快速筛选选项
const quickFilters = computed(() => [
  { value: 'featured', label: '精选', icon: '⭐', count: 0 },
  { value: 'recent', label: '最新', icon: '🆕', count: 0 },
  { value: 'popular', label: '热门', icon: '🔥', count: 0 },
])

// 文章类型选项
const articleTypes = computed(() => [
  { value: 'all', label: '全部', icon: '📝', count: props.totalArticles },
  { value: 'featured', label: '精选', icon: '⭐', count: 0 },
  { value: 'draft', label: '草稿', icon: '📄', count: 0 },
])

// 热门标签（取前10个）
const popularTags = computed(() => props.tags.slice(0, 10))

// 当前排序选项
const currentSortOption = computed(
  () => props.sortOptions.find((option) => option.value === sortBy.value) || props.sortOptions[0],
)

// 是否有活跃的筛选条件
const hasActiveFilters = computed(
  () =>
    searchQuery.value ||
    selectedCategory.value ||
    selectedTag.value ||
    selectedType.value !== 'all' ||
    dateRange.value.start ||
    dateRange.value.end,
)

// 活跃的筛选条件列表
const activeFilters = computed(() => {
  const filters = []
  if (selectedType.value !== 'all') filters.push(selectedType.value)
  return filters
})

// 事件处理
const handleSearchInput = () => {
  // 实时搜索防抖可以在这里实现
}

const handleSearch = () => {
  emit('search', searchQuery.value)
}

const clearSearch = () => {
  searchQuery.value = ''
  emit('search', '')
}

const handleQuickFilter = (filter: string) => {
  // 切换快速筛选
  const index = activeFilters.value.indexOf(filter)
  if (index > -1) {
    activeFilters.value.splice(index, 1)
  } else {
    activeFilters.value.push(filter)
  }
}

const handleCategorySelect = (category: string) => {
  selectedCategory.value = category
  emit('categoryChange', category)
}

const handleTagSelect = (tag: string) => {
  selectedTag.value = tag
  emit('tagChange', tag)
}

const handleSortChange = (sort: string) => {
  sortBy.value = sort
  emit('sortChange', sort)
}

const handleTypeSelect = (type: string) => {
  selectedType.value = type
  emit('typeChange', type)
}

const handleDateChange = () => {
  emit('dateRangeChange', { ...dateRange.value })
}

const clearAllFilters = () => {
  searchQuery.value = ''
  selectedCategory.value = ''
  selectedTag.value = ''
  selectedType.value = 'all'
  dateRange.value = { start: '', end: '' }
  emit('clearAll')
}

const applyFilters = () => {
  showAdvancedFilters.value = false
}

// 清除单个筛选条件
const clearCategory = () => {
  selectedCategory.value = ''
  emit('categoryChange', '')
}

const clearTag = () => {
  selectedTag.value = ''
  emit('tagChange', '')
}

const clearType = () => {
  selectedType.value = 'all'
  emit('typeChange', 'all')
}

const clearDateRange = () => {
  dateRange.value = { start: '', end: '' }
  emit('dateRangeChange', { start: '', end: '' })
}

// 辅助函数
const getCategoryName = (slug: string) => {
  return props.categories.find((cat) => cat.slug === slug)?.name || slug
}

const getTagName = (slug: string) => {
  return props.tags.find((tag) => tag.slug === slug)?.name || slug
}

const getTypeName = (type: string) => {
  return articleTypes.value.find((t) => t.value === type)?.label || type
}

const formatDateRange = () => {
  if (dateRange.value.start && dateRange.value.end) {
    return `${dateRange.value.start} 至 ${dateRange.value.end}`
  } else if (dateRange.value.start) {
    return `从 ${dateRange.value.start} 开始`
  } else if (dateRange.value.end) {
    return `到 ${dateRange.value.end} 结束`
  }
  return ''
}
</script>

<style scoped lang="scss">
.blog-filter-container {
  background: hsl(var(--b1));
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  border: 1px solid hsl(var(--bc) / 0.1);
}

/* 搜索区域 */
.filter-search-section {
  margin-bottom: 1.5rem;
}

.search-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--bc) / 0.5);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 2px solid hsl(var(--bc) / 0.1);
  border-radius: 0.75rem;
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  font-size: 1rem;
  transition: all 0.2s ease;

  &:focus {
    outline: none;
    border-color: hsl(var(--p));
    box-shadow: 0 0 0 3px hsl(var(--p) / 0.1);
  }

  &::placeholder {
    color: hsl(var(--bc) / 0.5);
  }
}

.clear-button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: hsl(var(--bc) / 0.5);
  cursor: pointer;
  border-radius: 0.25rem;
  transition: all 0.2s ease;

  &:hover {
    background: hsl(var(--bc) / 0.1);
    color: hsl(var(--bc));
  }
}

.search-button {
  padding: 0.75rem 1.5rem;
  background: hsl(var(--p));
  color: hsl(var(--pc));
  border: none;
  border-radius: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;

  &:hover:not(:disabled) {
    background: hsl(var(--pf));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsl(var(--p) / 0.3);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* 筛选工具栏 */
.filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.filter-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.quick-filters {
  display: flex;
  gap: 0.5rem;
}

.quick-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;

  &:hover {
    border-color: hsl(var(--p) / 0.3);
    background: hsl(var(--p) / 0.05);
  }

  &.active {
    border-color: hsl(var(--p));
    background: hsl(var(--p));
    color: hsl(var(--pc));
  }
}

.filter-icon {
  font-size: 1rem;
}

.filter-count {
  background: hsl(var(--bc) / 0.1);
  color: hsl(var(--bc));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.quick-filter-btn.active .filter-count {
  background: hsl(var(--pc) / 0.2);
  color: hsl(var(--pc));
}

.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;

  &:hover {
    border-color: hsl(var(--s) / 0.3);
    background: hsl(var(--s) / 0.05);
  }

  &.active {
    border-color: hsl(var(--s));
    background: hsl(var(--s));
    color: hsl(var(--sc));
  }
}

/* 排序区域 */
.sort-section {
  flex-shrink: 0;
}

.sort-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;

  &:hover {
    border-color: hsl(var(--a) / 0.3);
    background: hsl(var(--a) / 0.05);
  }
}

.sort-dropdown {
  background: hsl(var(--b1));
  border: 1px solid hsl(var(--bc) / 0.1);
  border-radius: 0.75rem;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 0.5rem;
  min-width: 12rem;
}

.sort-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: hsl(var(--bc) / 0.05);
  }

  &.active {
    background: hsl(var(--a));
    color: hsl(var(--ac));
  }
}

.option-icon {
  font-size: 1rem;
}

.option-label {
  font-weight: 500;
}

/* 高级筛选面板 */
.advanced-panel {
  background: hsl(var(--b2));
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  overflow: hidden;
}

.advanced-content {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.filter-group {
  background: hsl(var(--b1));
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid hsl(var(--bc) / 0.05);
}

.filter-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--bc));
  margin-bottom: 0.75rem;
}

.group-icon {
  font-size: 1rem;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    border-color: hsl(var(--p) / 0.3);
    background: hsl(var(--p) / 0.05);
  }

  &.active {
    border-color: hsl(var(--p));
    background: hsl(var(--p));
    color: hsl(var(--pc));
  }
}

.option-count {
  background: hsl(var(--bc) / 0.1);
  color: hsl(var(--bc));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.filter-option.active .option-count {
  background: hsl(var(--pc) / 0.2);
  color: hsl(var(--pc));
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-option {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;

  &:hover {
    border-color: hsl(var(--a) / 0.3);
    background: hsl(var(--a) / 0.05);
  }

  &.active {
    border-color: hsl(var(--a));
    background: hsl(var(--a));
    color: hsl(var(--ac));
  }
}

.tag-count {
  background: hsl(var(--bc) / 0.1);
  color: hsl(var(--bc));
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-option.active .tag-count {
  background: hsl(var(--ac) / 0.2);
  color: hsl(var(--ac));
}

.date-range {
  display: flex;
  align-items: end;
  gap: 0.75rem;
}

.date-input-group {
  flex: 1;
}

.date-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--bc) / 0.7);
  margin-bottom: 0.25rem;
}

.date-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border-radius: 0.375rem;
  font-size: 0.875rem;

  &:focus {
    outline: none;
    border-color: hsl(var(--p));
  }
}

.date-separator {
  font-size: 0.875rem;
  color: hsl(var(--bc) / 0.5);
  padding-bottom: 0.5rem;
}

.type-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.type-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    border-color: hsl(var(--s) / 0.3);
    background: hsl(var(--s) / 0.05);
  }

  &.active {
    border-color: hsl(var(--s));
    background: hsl(var(--s));
    color: hsl(var(--sc));
  }
}

.type-count {
  background: hsl(var(--bc) / 0.1);
  color: hsl(var(--bc));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.type-option.active .type-count {
  background: hsl(var(--sc) / 0.2);
  color: hsl(var(--sc));
}

.advanced-actions {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: hsl(var(--b3));
  border-top: 1px solid hsl(var(--bc) / 0.1);
  gap: 1rem;
}

.clear-all-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid hsl(var(--er));
  background: transparent;
  color: hsl(var(--er));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;

  &:hover {
    background: hsl(var(--er));
    color: hsl(var(--erc));
  }
}

.apply-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: hsl(var(--p));
  color: hsl(var(--pc));
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;

  &:hover {
    background: hsl(var(--pf));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px hsl(var(--p) / 0.3);
  }
}

/* 当前筛选状态 */
.active-filters {
  background: hsl(var(--b2));
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid hsl(var(--bc) / 0.1);
}

.active-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.active-filters-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--bc));
}

.title-icon {
  font-size: 1rem;
}

.results-count {
  font-size: 0.875rem;
  color: hsl(var(--bc) / 0.7);
}

.active-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.active-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--p) / 0.1);
  border: 1px solid hsl(var(--p) / 0.2);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.filter-type {
  font-weight: 500;
  color: hsl(var(--p));
}

.filter-value {
  color: hsl(var(--bc));
}

.remove-filter {
  padding: 0.125rem;
  border: none;
  background: transparent;
  color: hsl(var(--bc) / 0.5);
  cursor: pointer;
  border-radius: 0.125rem;
  transition: all 0.2s ease;

  &:hover {
    background: hsl(var(--bc) / 0.1);
    color: hsl(var(--bc));
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .blog-filter-container {
    padding: 1rem;
  }

  .search-container {
    flex-direction: column;
    gap: 0.75rem;
  }

  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .filter-section {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .quick-filters {
    justify-content: center;
  }

  .advanced-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .date-range {
    flex-direction: column;
    align-items: stretch;
  }

  .date-separator {
    text-align: center;
    padding: 0.5rem 0;
  }

  .advanced-actions {
    flex-direction: column;
  }
}
</style>
